<template>
    <view
        class="tree-item"
        :class="{
            expand: treeItemData.expand,
            active: activeId === treeItemData.id,
            'no-child': !treeItemData.children || treeItemData.children.length === 0,
        }">
        <view class="tree-content" @click="_clickEvent(treeItemData)">
            <view class="border"></view>
            <text class="tree-label">{{ treeItemData.name }}</text>
        </view>
    </view>
</template>

<script>
import NavTreeItem from "@/components/product/nav-tree-item.vue"
export default {
    name: "NavTreeItem",
    components: {
        NavTreeItem,
    },
    props: {
        treeItemData: {
            type: Object,
            default() {
                return {}
            },
        },
        activeId: {
            type: Number,
            default: -1,
        },
    },
    data() {
        return {}
    },
    methods: {
        // 节点点击事件
        _clickEvent(item) {
            this.$forceUpdate()
            this.$emit("treeClickEvent", item)
        },
    },
}
</script>
<style lang="scss">
.sub-tree {
    display: none;
    .tree-item {
        .tree-content {
            .tree-label {
                &:after {
                    width: 6rpx;
                    height: 6rpx;
                    right: 12rpx;
                }
            }
        }
    }
}

.tree-item {
    .tree-content {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        &:active {
            background: rgba(#ffffff, 0.6);
        }
        .tree-label {
            font-size: $font-size-28;
            // min-height: 98rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            position: relative;
            padding: 32rpx 30rpx;
            text-align: center;
            color: #4d4d4d;
            font-weight: bold;
            // &:after {
            // 	content: '';
            // 	display: inline-block;
            // 	position: absolute;
            // 	right: 16rpx;
            // 	top: calc(50% - 8rpx);
            // 	width: 6rpx;
            // 	height: 6rpx;
            // 	transform: rotate(45deg);
            // 	border: 1px solid;
            // 	border-color: transparent currentColor currentColor transparent;
            // }
        }
    }
}

.expand {
    background: $color-white;
    border-radius: 0px 16rpx 16rpx 0px;
    box-shadow: 4rpx 0px 8rpx 0rpx rgba(0, 0, 0, 0.06);
    overflow: hidden;
    // position: relative;
    // z-index: 1;
    & > .sub-tree {
        display: block;
    }

    & > .tree-content {
        .tree-label {
            &:after {
                transform: rotate(-135deg);
                top: calc(50%);
            }
        }
    }
}

.active {
    & > .tree-content {
        .border {
            background: $app-color-main;
        }

        .tree-label {
            font-weight: 700 !important;
            color: $app-color-main;
            background: $color-white;
        }
    }
}

.tree-item {
    .tree-content {
        .tree-label {
            &:after {
                content: none;
            }
        }
    }
}
.sub-tree {
    .tree-item {
        .tree-content {
            .tree-label {
                font-weight: normal;
                &:after {
                    content: none;
                }
            }
        }
    }
}
.sub-tree {
    .expand {
        .tree-content {
            .tree-label {
                &:after {
                    content: "";
                }
            }
        }
    }
}
.sub-tree {
    .expand {
        .sub-tree {
            .tree-item {
                .tree-content {
                    .tree-label {
                        &:after {
                            content: none;
                        }
                    }
                }
            }
        }
    }
}
.sub-tree {
    .no-child {
        // box-shadow: 0px 0px 0px #ffffff;
        // border-radius: 0px;
        .tree-content {
            .tree-label {
                &:after {
                    content: none;
                }
            }
        }
    }
}
.expand {
    .tree-content {
        .tree-label {
            &:after {
                content: "";
            }
        }
    }
}
.active {
    background: $color-white;
    border-radius: 0px 16rpx 16rpx 0px;
    box-shadow: 4rpx 0px 8rpx 0rpx rgba(0, 0, 0, 0.06);
    overflow: hidden;
    .tree-content {
        .tree-label {
            &:after {
                content: "";
            }
        }
    }
}
.no-child {
    // box-shadow: 0px 0px 0px #ffffff;
    // border-radius: 0px;
    .tree-content {
        .tree-label {
            &:after {
                content: none;
            }
        }
    }
}

.border {
    height: 40rpx;
    width: 12rpx;
    background: $transparent;
    position: absolute;
    left: -6rpx;
    top: 50%;
    margin-top: -20rpx;
    border-top-right-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    z-index: 1;
}
</style>
